<template>
	<view class="content">
		<view class="search-bar">
			<view class="left">
				<text class="iconfont icon-sousuo"></text>
				<input class="search-input" v-model="keyWord" focus placeholder-style="color:#B2B2B2" placeholder="输入您的问题" @confirm="onConfirm" />
			</view>
			<view class="search-btn" @tap="onConfirm">搜索</view>
		</view>

		<!--常见问题-->
		<view class="faq-hot" v-if="!empty && resultList.length === 0">常见问题</view>
		<view class="faq-list" v-if="!empty && resultList.length === 0">
			<view class="faq-item" v-for="(item, index) in hotList[0].list" :key="item.id" @tap="toHelpDetail(item)">
				<text class="iconfont icon-remensousuo" v-if="index === 0"></text>
				{{ item.title }}
			</view>
		</view>

		<!--搜索结果-->
		<view class="result-list" v-if="resultList.length > 0">
			<text class="result-title">搜索结果</text>
			<view class="result-item" v-for="(item, index) in resultList" :key="index" @tap="toHelpDetail(item)">
				<text class="iconfont icon-sousuo"></text>
				<text class="text">{{ item.title }}</text>
			</view>
		</view>

		<load-more v-if="keyWord.length > 0 && resultList.length === 0" :empty="empty" emptyText="暂无问题~"></load-more>

		<!--底部按钮-->
		<view class="footer-bar"><view class="call-service" @tap="$Router.push('/pages/member/service')">联系客服</view></view>

		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
import LoadMore from '@/components/LoadMore';
export default {
	name: 'helpSearch',
	components: {
		LoadMore
	},
	data() {
		return {
			keyWord: '',
			resultList: [],
			hotList: [],
			empty: false
		};
	},
	onLoad() {
		this.init();
	},
	onShow() {
		this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});
	},
	onHide() {
		this.$refs.aiSearch.close();
	},
	methods: {
		init() {
			this.$service.member.faq.page({
				app: 'hf',
				cid: '1'
			}).then((res) => {
				this.hotList = res;
			})
		},
		toHelpDetail(item) {
			uni.setStorageSync('helpItem', item);
			this.$Router.push('/pages/member/helpDetail');
		},
		onConfirm() {
			if (!this.keyWord) {
				uni.showToast({
					title: '请输入搜索关键词',
					icon: 'none'
				});
				return false;
			}
			this.empty = false;
			this.resultList = [];
			
			this.$service.member.faq.page({
				app: 'hf',
				keyWord: this.keyWord
			}).then((res) => {
				// 遍历结果集,合并二级问题
				res.forEach(item => {
					this.resultList = this.resultList.concat(item);
					
					if (this.resultList.length === 0) {
						this.empty = true;
					}
				})
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	background: #fff;
	min-height: 100vh;
	padding-bottom: 120rpx;
	.search-bar {
		width: 100%;
		padding-top: 16rpx;
		@include flexBox(center, center);
		.left {
			width: 578rpx;
			background: #f6f6f6;
			border-radius: 50rpx;
			color: #b2b2b2;
			padding: 12rpx 26rpx;
			box-sizing: border-box;
			@include flexBox(null, center);
			.iconfont {
				font-size: 38rpx;
				margin-right: 10rpx;
			}
			.search-input {
				font-size: 28rpx;
				color: #000;
			}
		}
		.search-btn {
			font-size: 28rpx;
			color: $main-color;
			margin-left: 30rpx;
		}
	}
	.faq-hot {
		margin-top: 50rpx;
		padding: 0 40rpx;
		font-size: 28rpx;
		color: #171717;
		font-weight: 600;
	}
	.faq-list {
		padding: 0 40rpx;
		margin-top: 40rpx;
		.faq-item {
			font-size: 24rpx;
			color: #717076;
			margin-top: 20rpx;
			&:first-child {
				color: $main-color;
			}
		}
	}
	.result-list {
		margin-top: 50rpx;
		padding: 0 40rpx;
		.result-title {
			font-size: 28rpx;
			color: #171717;
			font-weight: 600;
		}
		.result-item {
			color: #3b3b3b;
			font-size: 28rpx;
			margin-top: 40rpx;
			.iconfont {
				color: #b2b2b2;
				font-size: 32rpx;
				margin-right: 20rpx;
			}
		}
	}
	.footer-bar {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		height: 104rpx;
		box-shadow: 0 -6rpx 12rpx rgba(0, 0, 0, 0.16);
		@include flexBox(center, center);
		.call-service {
			width: 336rpx;
			line-height: 80rpx;
			background: $main-color;
			color: #fff;
			border-radius: 50rpx;
			font-size: 28rpx;
			text-align: center;
		}
	}
}
</style>
